<template>
	<view class="detail">
		<u-navbar
			@rightClick="rightClick"
			:autoBack="true"
			:fixed="false"
			class="navBar"
		>
			<view slot="left">
				<view class="left-icon" @click="goBack">
					<image src="../../static/icons/back.png" mode=""></image>
				</view>
			</view>
			<view slot="right">
				<view class="right-icons">
					<image src="../../static/icons/collection.png"></image>
					<image src="../../static/icons/collectioned.png" v-if="false"></image>
					<image src="../../static/icons/search.png"></image>
					<image src="../../static/icons/cart.png"></image>
				</view>
			</view>
		</u-navbar>
		<view class="content">
			<view class="content_info">
				<view class="info_left" :style="`background-image: url(${course.courseCover});`">
					<image src="https://xuexiluxian.cn/resources/images/vipLogo.png" mode=""></image>
				</view>
				<view class="info_detail">
					<view class="detail_main">
						<view class="detail_title">{{ course.courseName }}</view>
						<view class="detail_desc" v-if="course.description">{{ course.description }}</view>
						<view class="detail_desc" v-else>暂无课程介绍</view>
					</view>
					<view 
						class="detail_price" 
						v-if="course.discountPrice != 0 && course.isMember == 1"
					>
						会员专享 ￥{{ course.discountPrice }}
					</view>
					<view 
						class="detail_price"
						v-else="course.discountPrice == 0"
					>
						免费学习
					</view>
				</view>
			</view>
			<view class="content_choose">
				<view 
				v-for="item in courseNav" 
				:key="item.id"
				class="choose_item"
				:class="current == item.id ? 'active':''"
				@click="chooseOnchange(item.id)"
				>
					{{ item.name }}
				</view>
			</view>
			<swiper
			  :current="current"
			  @change="changeCurrent"
			  :style="'height:' + swiperHeight + 'px'"
			>
				<swiper-item>
					<scroll-view scroll-y="true" :style="'height:' + swiperHeight + 'px'">
						<catalogue :bizCourseChapters="bizCourseChapters"></catalogue>
					</scroll-view>
				</swiper-item>
				<swiper-item>
					<scroll-view scroll-y="true" :style="'height:' + swiperHeight + 'px'">
						<downLoadNote :bizCourseAttachments="bizCourseAttachments"></downLoadNote>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
		
		<view class="detail-footer">
			<view class="footer-cart">
				加入购物车
			</view>
			<view class="footer-buy">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import catalogue from '../../components/detail/catalogue.vue'
	import downLoadNote from '../../components/detail/downLoadNote.vue'
	// 引入获取课程详情接口函数
	import { getCourseDetail } from '../../api/course.js'
	import { mixins } from '../../mixins/mixins'
	
	export default {
		mixins:[mixins],
		data() {
			return {
				course:{
					description:'', // 课程简介
					courseCover:'', // 课程封面
					discountPrice:'', // 课程价格
					courseName:'',
					isMember:0, //是否为会员课程（1：是；0：否）
				},
				courseNav:[
					{name:'目录',id:0},
					{name:'下载笔记代码',id:1}
				],
				current:0,
				bizCourseAttachments:[], // 笔记数组
				bizCourseChapters:[], // 视频数组
				swiperHeight:0, // swiper动态高度
			}
		},
		methods:{
			chooseOnchange(id) {
				this.current = id
			},
			// swiper更改current
			changeCurrent(e) {
				this.current = e.detail.current
			},
			// 返回上一页
			goBack() {
				uni.navigateBack({
					delta:1
				})
			}
		},
		components:{
			catalogue,
			downLoadNote
		},
		onReady() {
			this.swiperHeight = this.getHeight('.navBar','.detail-footer','.content_info','.content_choose')
			console.log(this.swiperHeight,'swiperHeight')
		},
		onLoad(e) {
			let that = this
			getCourseDetail({courseId:e.id}).then(res => {
				let { bizCourseDetail,courseCover,discountPrice,courseName,isMember } = res.data
				that.course = {
					courseCover,
					discountPrice,
					courseName,
					description:bizCourseDetail.description,
					isMember
				}
				that.bizCourseAttachments = res.data.bizCourseAttachments
				that.bizCourseChapters = res.data.bizCourseChapters
			})
		}
	}
</script>

<style scoped lang="scss">
	.detail {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;
	}
	/* 左边icon图标的样式 */
	.left-icon {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-left: 10rpx;
	}
	.left-icon image {
		width: 44rpx;
		height: 44rpx;
	}
	/* 右边icon图标的样式 */
	.right-icons {
		display: flex;
		justify-content: center;
		align-items: center;
		padding-right: 10rpx;
	}
	.right-icons image{
		width: 35rpx;
		height: 35rpx;
	}
	.right-icons image:nth-child(2) {
		padding: 0 20rpx;
	}
	/deep/ .u-navbar--fixed {
		border-bottom: 1px solid #f5f5f5;
	}
	/* 内容部分样式 */
	.content {
		display: flex;
		flex-direction: column;
		& .content_info {
			display: flex;
			justify-content: space-between;
			padding: 0rpx 30rpx;
			align-items: center;
			.info_left {
				position: relative;
				width: 300rpx;
				height: 186rpx;
				background-size: 100% 100%;
				& image {
					position: absolute;
					width: 52rpx;
					height: 22rpx;
					top:0;
					right:0;
				}
			}
		}
	}
	// 内容样式
	.info_detail {
		display: flex;
		flex: 1;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		margin-left: 16rpx;
		.detail_title {
			font-size: 32rpx;
			font-weight: 400;
			color:#191919;
			padding-bottom: 20rpx;
		}
		.detail_desc {
			font-size: 24rpx;
			height: 30px;
			font-weight: 400;
			color:#c5c5c5;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
		}
		.detail_price {
			// margin-top: 30rpx;
			font-size: 24rpx;
			font-weight: 700;
			color: #ff0018;
		}
	}
	// 选项样式
	.content_choose {
		display: flex;
		justify-content: space-around;
		align-items: center;
		margin-top: 10rpx;
		margin-bottom: 10rpx;
	}
	.choose_item {
		font-size: 28rpx;
		color: #303133;
		height: 48rpx;
		position: relative;
		&.active::after {
		content: '';
		position: absolute;
		left: 0;
		bottom: -2rpx;
		background-color: #0445ff;
		width: 100%;
		height: 3px;
		border-radius: 4px;
	}
	}
	// 底部按钮样式
	.detail-footer {
		display: flex;
		justify-content: space-around;
		width: 100%;
		height: 170rpx;
		border-top: 1px solid #c5c5c5;
		position: fixed;
		left:0;
		bottom: 0;
		align-items: center;
		text-align: center;
		font-size: 28rpx;
		color: white;
		background: #FFF;
	}
	.footer-cart {
		width: 260rpx;
		height: 81rpx;
		line-height: 81rpx;
		border-radius: 40rpx;
		background: linear-gradient(90deg,#feb729 0 ,#ff9528);
	}
	.footer-buy {
		width: 260rpx;
		height: 81rpx;
		line-height: 81rpx;
		border-radius: 40rpx;
		background: linear-gradient(90deg,#fe5b5c 0 ,#ec0d0e);
	}
	/* 去除scrollbar底部的滚动条 */
	/deep/ ::-webkit-scrollbar {
		display: none;
	}
</style>